<html>
<head>
  <title>Kuma Demo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script type="text/javascript">
    var interval;
    var running = false;
    var redisErrCount = 0;
    var appErrCount = 0;

    // Set shortcut for delete which does not exist nativelt in jQuery
    $.delete = function(url, data, callback, type) {
      if ( $.isFunction(data) ){
        type = type || callback,
            callback = data,
            data = {}
      }
      return $.ajax({
        url: url,
        type: 'DELETE',
        success: callback,
        data: data,
        contentType: type
      });
    }

    function increment() {
      var status = $("#status");
      var zone = $("#zone");
      var counter = $("#counter");
      var redisErrors = $("#redis-error-count");
      var appErrors = $("#app-error-count");
      
      if (running) {
        return;
      }
      running = true;
      
      $.post('/increment', function (data, textStatus, jqXHR) {
        if (data.err == null) {
          status.removeClass("error");
          status.text("Everything is working")
          counter.text(data.counter);
          var zoneVal = data.zone;
          if (zoneVal == null) {
            zoneVal = "unknown";
          }
          zone.text(zoneVal);
        } else {
          status.addClass("error");
          status.text("Cannot connect to: redis");
          redisErrCount++;
          redisErrors.text(redisErrCount);
          counter.text("-");
          zone.text("-");
        }
        running = false;
      }).fail(function(){
        status.addClass("error");
        status.text("Cannot connect to: demo-app");
        appErrCount++;
        appErrors.text(appErrCount);
        running = false;
      });
    }

    function reset() {
      var status = $("#status");
      var zone = $("#zone");
      var counter = $("#counter");
      
      if (running) {
        return;
      }
      running = true;
      
      $.delete('/counter', function (data, textStatus, jqXHR) {
        if (data.err == null) {
          status.removeClass("error");
          status.text("Everything is working")
          counter.text(data.counter);
          var zoneVal = data.zone;
          if (zoneVal == null) {
            zoneVal = "unknown";
          }
          zone.text(zoneVal);
        } else {
          status.addClass("error");
          status.text("Cannot connect to: redis")
          redisErrCount++;
          redisErrors.text(redisErrCount);
          counter.text("-");
          zone.text("-");
        }
        running = false;
      }).fail(function(){
        status.addClass("error");
        status.text("Cannot connect to: demo-app")
        appErrCount++;
        appErrors.text(appErrCount);
        running = false;
      });
    }

    function stopAutoIncrement() {
      clearInterval(interval);
      $("#increment").prop("disabled", false);
      $("#reset").prop("disabled", false);
      $("#autoincrement").prop("checked", false);
    }

    $(document).ready(function() {
      var status = $("#status");
      var zone = $("#zone");
      var counter = $("#counter");

      $.get('/version', function (data, textStatus, jqXHR) {
        $("#header").css("background-color", data.color);
        $("#version").text(data.version);
        $("#loading").remove();
        $("#content").removeClass("hide");
      });
      $.get('/counter', function (data, textStatus, jqXHR) {
        var counterVal;
        var zoneVal;
        if (data == null) {
          counterVal = "0";
          zoneVal = "unknown";
        } else {
          counterVal = data.counter;
          zoneVal = data.zone;
          if (zoneVal == null) {
            zoneVal = "unknown";
          }
        }
        counter.text(counterVal);
        zone.text(zoneVal);
      });

      $("#increment").click(function(){
        increment();
      });

      $("#reset").click(function(){
        reset();
      });

      var autoincrement = $("#autoincrement");
      autoincrement.click(function(){
        if (autoincrement.is(":checked")) {
          $("#increment").prop("disabled", true);
          $("#reset").prop("disabled", true);
          interval = setInterval(function(){
            increment();
          }, 0);
        } else {
          stopAutoIncrement()
        }
      });
    });
  </script>
  <style type="text/css">
    *, *:before, *:after {
      box-sizing: border-box;
      margin: 0;
    }

    body {
      font-family: "Segoe UI",Arial,sans-serif;
      text-align: center;
      font-size: 16px;
      margin:0;
    }

    #header {
      padding: 50px;
      background-color: #efefef;
    }

    #counter {
      /* font-size: 200px; */
      /* text-shadow: 4px 4px #cccccc; */
    }

    #zone {
      /* font-size: 200px; */
      /* text-shadow: 4px 4px #cccccc; */
    }

    .error {
      /* color: red; */
      /* font-size: 100px !important; */
    }

    #buttons {
      border: 1px solid #cccccc;
      padding: 20px;
      width: 400px;
      margin: 0 auto;
    }

    #increment {
      font-size: 20px;
    }

    .center {
      position: absolute;
      width: 200px;
      height: 50px;
      top: 50%;
      left: 50%;
      margin-left: -50px; /* margin is -0.5 * dimension */
      margin-top: -25px; 
    }​

    .hide {
      display: none !important;
    }

    h1, h2, h3, h4, h5, h6, p {
      margin: 0 0 20px 0;
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    img {
      max-width: 100%;
      height: auto;
    }

    a {
      color: #1456cb;
    }

    .diagram {
      display: block;
      margin: 30px auto;
      text-align: center;
    }

    .button {
      position: relative;
      display: inline-flex;
      align-items: center;
      padding: 8px 12px;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.25;
      text-decoration: none;
      vertical-align: middle;
      color: #fff;
      border: 1px solid transparent;
      border-radius: 3px;
      transition: all .2s ease-in-out;
      cursor: pointer;
      background: #1456cb;
    }

    #status {
      display: block;
      border-radius: 5px;
      padding: 10px;
      margin: 20px auto;
      background: #82d9a6;
      font-size: 20px;
      font-weight: bold;
    }

    #status.error {
      background: #ffb3bf;
    }

    #status:empty {
      display: none !important;
    }

    .content {
      position: relative;
    }

    .inner {
      max-width: 1300px;
      margin-left: auto;
      margin-right: auto;
    }

    .columns {
      display: flex;
      max-width: 1300px;
      margin: 20px auto;
      text-align: left;
    }

    .columns > div {
      flex: 1;
      flex-basis: 50%;
      padding: 50px;
    }

    /* make sure to place your content above the pseudo element! */
    .info > * {
      position: relative;
      z-index: 1;
    }

    /* hacky background 50% column trick */
    .info::after {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      content: "";
      width: 50vw;
      height: 100%;
      background: rgba(0, 0, 0, 0.025);
    }

    button:disabled {
      background-color: #cccccc;
    }

    .controls-container {
      
    }

    .controls {
      display: flex;
      /* align-items: center; */
      justify-content: center;
      text-align: center;
      margin: 0 0 15px 0;
      padding: 0 0 15px 0;
      border-bottom: 1px solid #eee;
    }

    .controls > div {
      flex: 0 0 50%;
      padding: 0 20px;
    }

    .controls button {
      display: block;
      width: 100%;
    }

    .auto-increment-container {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 15px 0 30px 0;
      text-align: center;
    }

    .icon {
      display: inline-block;
      width: 32px;
      height: auto;
      margin: 0 5px;
    }

    .icon-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 5px;
      background: #eee;
      padding: 10px 20px;
      margin: 10px 0;
    }

    .icon-button img {
      margin-right: 10px;
    }

    .tile {
      text-align: left;
      border-left: 3px solid;
      border-left-color: rgba(0, 0, 0, 0.1);
      background-color: rgba(150, 58, 133, 0.05);
      padding: 16px 26px;
      margin: 0 0 20px 0;
    }

    .tile h3 {
      font-size: 24px;
      font-weight: normal;
      color: rgba(0, 0, 0, 0.45);
      margin: 0 0 10px 0;
    }

    .tile p {
      font-weight: 400;
      font-size: 50px;
      color: rgba(0, 0, 0, 0.75);
      margin: 0;
    }

    input[type=checkbox] {
      display: inline-block;
      margin-right: 10px;
    }

    footer {
      background: #fff;
      border-top: 1px solid #eee;
    }

    @media (min-height: 775px) {
      footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
      }
    }

    footer > .inner {
      text-align: center;
      padding: 30px;
    }

    footer p {
      margin: 0 0 10px 0;
    }

    .type-s { font-size: 14px !important; }
    .type-lg { font-size: 18px !important; }
    .type-xl { font-size: 22px !important; }
    .type-xxl { font-size: 28px !important; }
    .type-xxxl { font-size: 32px !important; }

  </style>
</head>
<body>
  <div id="loading" class="center">
    Loading...
  </div>
  <div id="content" class="hide">

    <div class="columns">
      <div class="info">
        <h1 class="type-xxxl">Kuma Counter Demo <span id="version"></span></h1>
        <p class="type-xl">
          Welcome to a simple demo application to demonstrate how the Kuma service mesh works. This application allows us
          to increment a counter, and it is made of two different services:
        </p>
        <ul class="type-xl">
          <li><strong>demo-app:</strong> To serve the backend API and this frontend</li>
          <li><strong>redis:</strong> To store the counter value</li>
        </ul>
        <p>
          <img class="diagram" src="./demo-app-diagram.png" alt="Kuma Counter Demo App diagram">
        </p>
      </div>
      <div class="controls-container">

        <div class="controls">
          <div>
            <button id="increment" class="button type-xxxl">Increment</button>
          </div>
          <div>
            <button id="reset" class="button type-xxxl">Reset</button>
          </div>
        </div>

        <div class="auto-increment-container">
          <input type="checkbox" id="autoincrement" value="value" />
          <label for="autoincrement" class="type-xl">Auto Increment</label>
        </div>

        <div class="output">
          <span id="status"></span>
          
          <div class="tile">
            <h3>Counter</h3>
            <p>
              <span id="counter"></span>
            </p>
          </div>

          <div class="tile">
            <h3>Zone</h3>
            <p>
              <span id="zone"></span>
            </p>
          </div>
          <div>
              redis errors: <span id="redis-error-count">0</span>
          </div>
          <div>
              demo-app errors: <span id="app-error-count">0</span>
          </div>

        </div>
      </div>
    </div>

    <footer>
      <div class="inner">
        <p>
          You can find the source code for this demo at
        </p>
        <p>
          <a href="https://github.com/kumahq/kuma-counter-demo" class="icon-button" target="_blank">
            <img src="./github.svg" alt="GitHub logo" class="icon">
            <span>https://github.com/kumahq/kuma-counter-demo</span>
          </a>
        </p>
      </div>
    </footer>
  </div>
</body>
</html>

